<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .router-link-active {
        background-color: blueviolet;
    }

    .news .router-link-exact-active {
        background-color: cornflowerblue;
    }
</style>

<body>
    <div id="app">
        <router-link to='/home' tag='button'>跳转到home页</router-link>
        <router-link to='/news' tag='button'>跳转到News页</router-link>
        <router-link to='/about' tag='button'>跳转到About页</router-link>
        <!-- <button @click="clickHome">点击跳转到home</button>
        <button @click="clickNews">点击跳转到News</button>
        <button @click="clickAbout">点击跳转到About</button> -->
        <router-view></router-view>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script src='../vue-router.js'></script>
    <script>
        const Home = {
            template: `
            <div>
                <h2>我是Home叶</h2>
               

            </div>
            
            `,
            mounted() {
               console.log(this.$router.getRoutes)
            },
            watch: {
                $route(to, from) {
                    console.log(to)
                    console.log(from)
                }
            }
        }
        const News = {
            template: `
            <div class="news">
                <h2>我是News叶</h2>
                <router-link to='/news/chilenews' tag='button'>跳转到ChileNews页</router-link>
                <router-link to='/news/chile' tag='button'>跳转到Chile页</router-link>
                <router-view></router-view>
            </div>
            
            `,
            mounted() {
                console.log(this.$router);
                console.log(this.$router.getRoutes());
            }
        }
        const About = {
            template: `
            <div>
                <h2>我是About叶</h2>
            </div>
            
            `
        }
        const NotFound = {
            template: `
            <div>
                <h2>404</h2>
            </div>
            
            `
        }
        const ChileNews = {
            template: `
            <div>
                <h2>我是ChileNews</h2>
            </div>
            
            `
        }
        const Chile = {
            template: `
            <div>
                <h2>我是Chile</h2>
            </div>
            
            `
        }
        const routes = [
            {
                path: '/',
                redirect: '/news'
            },
            {
                path: '/home',
                alias:'/h',
                name: 'home',
                component: Home
            },
            {
                path: '/news',
                name: 'news',
                component: News,
                children: [
                    {
                        path: '/news',
                        redirect: '/news/chile'
                    },
                    {
                        path: '/news/chilenews',
                        component: ChileNews
                    },
                    {
                        path: '/news/chile',
                        component: Chile
                    }
                ]
            },
            {
                path: '/about',
                name: 'about',
                component: About
            },
            {
                path: '*',
                component: NotFound
            },
        ]
        const router = new VueRouter({
            routes
        })


        const vm = new Vue({
            el: '#app',
            router
            // methods: {
            //     clickHome() {
            //         this.$router.push(
            //             {
            //                 name: 'home',
            //                 params: {
            //                     id: 2,
            //                     name: 'fan'
            //                 }
            //             }
            //         )
            //     },
            //     clickNews() {
            //         // this.$router.push('/news')
            //         this.$router.push({
            //             name: 'news',
            //             id: 3
            //         })
            //     },
            //     clickAbout() {
            //         // this.$router.replace('/about')
            //         this.$router.replace({
            //             name: 'about',
            //             id: 4
            //         })
            //     }
            // }
        })
    </script>
</body>

</html>